<template>
  <div>
    <File v-if="disabled === true" v-model="this.fileList" />
    <el-upload
      ref="upload"
      v-if="disabled === false"
      class="upload-demo"
      :class="Widths(widths)"
      :action="endpoint"
      :headers="{ Authorization: token }"
      :on-success="handleExcelImportSuccess"
      :on-error="handleExcelImportError"
      :on-remove="handleRemove"
      :on-preview="preview"
      :file-list="value"
      :before-upload="beforeUpload"
      multiple
      :show-file-list="conceal"
    >
      <el-button size="mini" type="primary" icon="el-icon-upload2"
        >点击上传</el-button
      >
      <div slot="tip" class="el-upload__tip">
        <!-- 只能上传jpg/jpeg/png/pdf/doc/docx/xls/xlsx/txt文件 -->
        单个文件不能超过200M
      </div>
      <!-- :before-upload="beforeUpload" 上传前文件类型 -->
    </el-upload>
  </div>
</template>

<script>
import File from "./LookFile/index.vue";

let fileApapter = (response) => {
  return {
    name: response.name,
    url: response.ImageUrl,
    id: response.src,
    // 文件类型
    type: response.FileType.slice(1),
  };
};
export default {
  name: "UniversalUploadBtn",

  components: {
    File,
  },

  props: {
    value: {
      type: Array,
      default() {
        return [];
      },
    },
    Isvideo: {
      type: Boolean,
      default() {
        return false;
      },
    },

    // token: {
    //   type: String,
    //   default: localStorage.getItem("token"),
    // },

    endpoint: {
      type: String,
      // default: "https://wechatpyzl.51yunmai.com/FileUpload/FileUpload",
      default: process.env.VUE_APP_UPLOAD,
      // default: "http://wxapp.51yunmai.com:8097/prod-api/system/oss/upload",
      // default: "http://gd.so56.net/prod-api/system/oss/upload",
    },

    // 是否显示按钮
    disabled: {
      type: Boolean,
    },

    // 是否显示文件列表
    conceal: {
      type: Boolean,
      default: true,
    },
    // 组件宽度
    widths: {
      type: String,
      default: "80%",
    },
  },

  computed: {
    token() {
      let ret = "Bearer " + localStorage.getItem("token");
      console.log(`token: `, ret);
      return ret;
    },
  },

  watch: {
    value: {
      handler(newVal, oldVal) {
        this.fileList = this.value;
      },
      immediate: true,
    },
  },

  data() {
    return {
      fileList: [],
      // 加载
      loading: {},
    };
  },

  methods: {
    beforeUpload(file) {
      // const fileType = file.type
      // const isImage = fileType.startsWith("image/")

      // if (!isImage) {
      //   this.$message.error("只能上传图片文件！")
      //   return false // 阻止上传
      // }

      // 其他验证逻辑...
      //Isvideo为true视频验证逻辑
      if (this.Isvideo) {
        const videoFileTypes = [
          "video/mp4",
          "video/ogg",
          "video/flv",
          "video/avi",
          "video/wmv",
          "video/rmvb",
          "video/mov",
        ];
        const videoFileType = videoFileTypes.find((type) =>
          new RegExp(file.type, "i").test(type)
        );
        if (videoFileType === undefined) {
          this.$message.error("只能上传视频文件！");
          return false; // 阻止上传
        }
      }

      this.loading = this.$loading({
        lock: true,
        text: "文件上传中...",
        spinner: "el-icon-loading",
        // background: 'rgba(0, 0, 0, 0.7)',
      });

      return true; // 允许上传
    },

    handleProgress(event, file, fileList) {
      console.log("process::");
      console.log(event);
    },

    // 处理Excel导入成功
    handleExcelImportSuccess(response, file, fileList) {
      this.loading.close();
      console.log("upload success!!");

      let fileAdapter = (item) => {
        let { response } = item;
        let { raw } = item;
        if (item && item.response) {
          return {
            name: response.data.fileName,
            url: response.data.url,
            id: response.data.ossId,
            // 文件类型
            type: raw.type,
          };
        }
        return item;
      };

      if (response.code === 500) {
        this.$message.error("上传异常");
        let index = fileList.indexOf(file);
        fileList.splice(index, 1);
        let ret = fileList.map(fileAdapter);
        this.$emit("input", ret);
        return;
      }

      let ret = fileList.map(fileAdapter);
      this.$emit("input", ret);
    },

    handleExcelImportError(err, file, fileList) {
      this.loading.close();
      console.log(err, file, fileList);
      this.$message.error("网络异常...");
    },

    handleRemove(file, fileList) {
      // this.fileList.
      // let index = fileList.find(item => item.url === file.url)
      //
      this.fileList = fileList;
      this.$emit("input", this.fileList);
    },

    // 预览列表文件
    preview(file) {
      const fileType = file.type;
      const isImage = fileType.startsWith("image/");
      // 校验该属性是否是图片文件
      if (isImage) {
        this.$bus.$emit("preview:image", {
          url: file.url,
          srcList: [file.url],
        });
      } else {
        // console.log(file)
        this.$downFile4(file.url, file.name);
      }
    },
    Widths(val) {
      if (val === "80%") {
        return "upload-demos";
      }
      if (val === "150px") {
        return "upload-demoss";
      }
      if (val === "30%") {
        return "upload-demosss";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.el-upload__tip {
  font-size: 15px;
  margin: auto;
}

::v-deep.upload-demos {
  & .el-upload-list {
    width: 80%;
    margin-top: -5px;

    & .el-upload-list__item.is-success:focus:not(:hover) {
      & .el-icon-close-tip {
        display: none;
      }
    }

    & .el-upload-list__item {
      transition: none !important;
    }
  }
}

::v-deep.upload-demoss {
  & .el-upload-list {
    width: 150px;

    & .el-upload-list__item.is-success:focus:not(:hover) {
      & .el-icon-close-tip {
        display: none;
      }
    }

    & .el-upload-list__item {
      transition: none !important;
    }
  }
}

::v-deep.upload-demosss {
  & .el-upload-list {
    width: 30%;

    & .el-upload-list__item.is-success:focus:not(:hover) {
      & .el-icon-close-tip {
        display: none;
      }
    }

    & .el-upload-list__item {
      transition: none !important;
    }
  }
}
::v-deep.upload-demo {
  /* 取消上传动画 */
  & .el-upload-list__item {
    transition: none;
  }
}
</style>
